<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/laydate/laydate.js"></script>
<style>
h2 {
	padding-left: 7%;
}

.table_notice {
	width: 70%;
	margin-left: 10%;
}

.sea {
	width: 80%;
	margin: auto;
	margin-bottom: 15px;
}

#addCar {
	float: right;
	margin-right: 15px;
}

</style>
</head>
<body>
  <div>
    <div>
      <h2>用车申请</h2>
      <div class="table_notice">
          <table class="table table-bordered" id="table">
				<tr class="success">
					<td colspan="5">我的申请列表 <span class="glyphicon glyphicon-plus" id="addCar">新增申请</span></td>
				</tr>
				<tr class="info">
					<th>排序</th>
					<th>用车时间</th>
					<th>目的地</th>
					<th>用车理由</th>
					<th>状态</th>
				</tr>
				<tr v-for="carApply in carApplyList" class="danger">
					<td>{{$index+1}}</td>				
					<td>{{carApply.starttime}}-{{carApply.stoptime}}</td>
					<td>{{carApply.ca_destination}}</td>
					<td>{{carApply.ca_cause}}</td>
					<td>{{carApply.ca_starte}}</td>

				</tr>
			</table>
      </div>
    </div>
    
    <div class="modal fade" id="look-diary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">新增日志</h4>
                </div>
                <div class="modal-body">
                    <form action="../addApplyCar" method="post" id="addfrom">
                        <table class="table table-bordered" id="applyTable">                         
                            <tr>
                               <td>选择车辆</td>
                               <td>
                                  <select id="" name="ca_carno">					
						                <option v-for="car in carList" value="{{car.cm_id}}">{{car.cm_style}}</option>			             
						          </select>
                               </td>
                            </tr>
                            <tr>
                               <td>开始时间</td>
                               <td><input type="text" id="test5" name="starttime"></td>                            
                            </tr>
                            <tr>
                               <td>结束时间</td>
                               <td><input type="text" id="test6" name="stoptime"> </td>
                            </tr>
                            <tr>
                               <td>目的地</td>
                               <td><input type="text" name="ca_destination"></td>
                            </tr>
                            <tr>
                               <td>用车理由</td>
                               <td><textarea rows="4" cols="30" name="ca_cause"></textarea></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default submit" data-dismiss="modal">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
  </div>
  
  <script type="text/javascript">
     $(function(){
    	 $("#addCar").click(function(){
    		 $("#look-diary").modal("show");
    		 vue.getCarList2();
    	 })
    	 $(".submit").click(function(){
    		 $("#addfrom").submit();
    	 })
    	 
    	 var vue = new Vue({
    		 el:"#applyTable",
    		 data:{carList:""},
    		 methods:{
    			 getCarList2: function(){
    				 var _self = this;
    				 $.ajax({
    					 url:'../getCnameList',
    					 type:'post',
    					 dataType:'json',
    					 success : function(result){
    						 console.log(result);
    						 _self.carList = result;
    					 }
    				 })
    			 }
    		 }
    	 })
    	 
    	 var vue2 = new Vue({
    		 el:"#table",
    		 data:{carApplyList:""},
    		 methods:{
    			 getCarApply:function(){
    				 var _self = this;
    				 $.ajax({
    					 url:'../getMyCar',
    					 type:'post',
    					 dataType:'json',
    					 success : function(result){
    						 console.log(result);
    						 _self.carApplyList=result;
    					 }
    				 })
    			 }
    		 }
    	 })
    	 vue2.getCarApply();
    	 
     })
   
     laydate.render({
  elem: '#test6'
  ,type: 'datetime'
});
     laydate.render({
    	  elem: '#test5'
    	  ,type: 'datetime'
    	});
   
  </script>
</body>
</html>